<template>
  <div class="cascader-column">
    <!-- 第一列数据不会很多，且需要兼顾索引功能，所以不用长列表组件 -->
    <div
      v-if="level === 0"
      :id="indexed ? `${cascaderName}-daas-cascader-anchor-container` : ''"
      class="container"
    >
      <div v-for="(option, index) in options" :key="option.key || index">
        <div class="list">
          <div
            v-if="option.isTitle === level"
            :id="indexed ? `${cascaderName}-daas-cascader-${option.key}` : ''"
            class="index-name"
            :style="`height: ${lineHeight}px; line-height: ${lineHeight}px;`"
          >
            {{ option.value }}
          </div>
          <CascaderSelect
            v-else
            :height="lineHeight"
            :option="option"
            :values="values"
            @change="handleSelect"
          />
        </div>
      </div>
    </div>
    <Virtallist v-else :size="lineHeight" :remain="remain" :options="options">
      <!-- 获得scope的数据 -->
      <div slot-scope="{ item }" :item="item" class="tr">
        <div
          v-if="item.isTitle === level"
          :id="indexed ? `daas-cascader-${item.key}` : ''"
          class="index-name"
          :style="`height: ${lineHeight}px; line-height: ${lineHeight}px;`"
        >
          {{ item.value }}
        </div>
        <CascaderSelect
          v-else
          :option="item"
          :height="lineHeight"
          :values="values"
          @change="handleSelect"
        />
      </div>
    </Virtallist>
  </div>
</template>

<script>
import Virtallist from "./Virtallist";
import CascaderSelect from "./CascaderSelect.vue";
export default {
  components: {
    Virtallist,
    CascaderSelect
  },
  props: {
    options: {
      type: Array,
      default: () => []
    },
    values: {
      type: Array,
      default: () => []
    },
    indexed: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 0
    },
    remain: {
      type: Number,
      default: 9
    },
    activeValue: {
      type: [Number, String],
      default: ""
    },
    level: {
      type: Number,
      default: 0
    },
    cascaderName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      indeterminate: false
    };
  },
  computed: {
    lineHeight() {
      return this.height / this.remain || 0;
    }
  },
  mounted() {
    if (this.indexed) {
      const node = this.getContainer();
      this.$emit("node", node);
    }
  },
  methods: {
    getContainer() {
      const id = `${this.cascaderName}-daas-cascader-anchor-container`;
      return document.getElementById(id);
    },
    handleSelect(option, checked) {
      this.$emit("change", option, checked);
    }
  }
};
</script>

<style lang="less" scoped>
.cascader-column {
  height: 100%;

  .container {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .index-name {
    background: #f6f7fa;
    padding: 0 10px;
  }
}
</style>
